<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td {
            width: 400px;
            height: 30px;
            text-align: center;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    <div class="1" align="center">
        <select id="left" v-on:change="result" v-model="left" >
            <option value="0">人民币</option>
            <option value="1">美元</option>
            <option value="2">日元</option>
            <option value="3">欧元</option>
            <option value="4">韩元</option>
        </select>
        <button @click="exchange">互换</button>
        <select id="right" v-on:change="result" v-model="right">
            <option value="0">人民币</option>
            <option value="1">美元</option>
            <option value="2">日元</option>
            <option value="3">欧元</option>
            <option value="4">韩元</option>
        </select>
        <span>数额：</span>
        <input id="money" v-model="money">
        <button v-on:click="result">汇率转换</button>
    </div>
    <div class="2" align="center">
        <table border="1px">
            <tr>
                <td colspan="3" bgcolor="red">按当前汇率兑换结果</td>

            </tr>
            <tr>
                <td id="td1">{{td1}}</td>
                <td>汇率</td>
                <td id="td2">{{td2}}</td>
            </tr>
            <tr>
                <td id="td3">{{td3}}</td>
                <td id="td4">{{td4}}</td>
                <td id="td5">{{td5}}</td>
            </tr>
        </table>
    </div>
</div>
<script>

    new Vue({
        el: "#root",
        // data: {
        //     left: "0",
        //     right: "0",
        //     listMoney: ["人民币", "美元", "日元", "欧元", "韩元"],
        //     listRate: [6, 1, 100, 0.9, 1000],
        //     td1: "人民币",
        //     td2: "人民币",
        //     td3: "1",
        //     td4: "",
        //     td5: "1",
        //     money:"",
        // },
        methods: {
            exchange: function () {
                var temp = this.left
                this.left = this.right
                this.right = temp
            },
            add(){

            },

            result: function () {
                var rate = this.listRate[this.right] / this.listRate[this.left]
                console.log(this.left, this.right,rate)
                this.td1=this.listMoney[this.left]
                this.td2=this.listMoney[this.right]
                this.td3=this.money
                this.td4= rate
                console.log(this.td4)
                this.td5=this.rate*this.money
            }

        }


    })
    // function exchange() {
    //     var selectLeft = document.getElementById("left")
    //     var selectRight = document.getElementById("right")
    //     var temp = selectLeft.value
    //     selectLeft.value = selectRight.value
    //     selectRight.value = temp
    // }
    //
    //
    //
    // function result() {
    //     var listMoney = ["人民币", "美元", "日元", "欧元", "韩元"]
    //     var listRate = [6, 1, 100, 0.9, 1000]
    // var selectLeft = document.getElementById("left")
    // var leftValue = selectLeft.value
    // var selectRight = document.getElementById("right")
    // var rightValue = selectRight.value
    // var input = document.getElementById("money")
    // var inputStr = input.value
    // var rate = listRate[rightValue] / listRate[leftValue]
    // document.getElementById("td1").innerText = listMoney[leftValue]
    // document.getElementById("td2").innerText = listMoney[rightValue]
    // document.getElementById("td3").innerText = inputStr
    // document.getElementById("td4").innerText = rate
    // document.getElementById("td5").innerText = rate * inputStr

    //}


</script>
</body>
</html>